<template>
  <bd-popup
    class="custom"
    popupId="conversionDesc"
    :weights="2.9"
    v-model:show="props.show"
    :style="{
      'background-color': 'transparent',
      overflow: 'initial',
    }"
    zIndex="999996"
    teleport="body"
    :overlay-style="{ background: 'rgba(0, 0, 0, 0.5)' }"
    :close-on-click-overlay="false"
  >
    <!-- 容器 -->
    <div class="box">
      <!-- 标题 -->
      <div class="box-title">
        <!-- 容器背景 -->
        <img class="box-title-bg" src="/image/title-bg-blue.png" />
        <!-- 标题 -->
        <div class="box-title-value">
          {{ $t("lotteryMoney.xybxjp") }}
        </div>
      </div>
      <!-- 描述 -->
      <div class="box-desc">
        {{ $t("lotteryMoney.xybxDesc") }}
      </div>
      <div class="box-item items-center">
        <img class="box-item-img" src="/image/bdc2.svg" />
        <div class="box-item-text">200 BDC</div>
      </div>
      <div class="box-item items-center">
        <img class="box-item-img" src="/image/bet-blue.svg" />
        <div class="box-item-text">2 {{ $t("lotteryMoney.freeCard") }}</div>
      </div>
      <div class="box-item items-center">
        <img class="box-item-img" src="/image/money-green.svg" />
        <div class="box-item-text">
          $ {{ $t("lotteryMoney.xxxdhed").replace("xxx", "0.50") }}
        </div>
      </div>
      <div class="box-item items-center">
        <img class="box-item-img" src="/image/money-green.svg" />
        <div class="box-item-text">
          $ {{ $t("lotteryMoney.xxxdhed").replace("xxx", "1.00") }}
        </div>
      </div>
      <div class="box-item items-center">
        <img class="box-item-img" src="/image/money-green.svg" />
        <div class="box-item-text">
          $ {{ $t("lotteryMoney.xxxdhed").replace("xxx", "2.00") }}
        </div>
      </div>
      <div class="box-item items-center">
        <img class="box-item-img" src="/image/money-green.svg" />
        <div class="box-item-text">
          $ {{ $t("lotteryMoney.xxxdhed").replace("xxx", "5.00") }}
        </div>
      </div>
      <div class="box-item items-center" style="margin-bottom: 0">
        <img class="box-item-img" src="/image/money-green.svg" />
        <div class="box-item-text">
          $ {{ $t("lotteryMoney.xxxdhed").replace("xxx", "100.00") }}
        </div>
      </div>
      <!-- 分享好友 -->
      <div class="footer" @click="shareApp">
        <div class="footer-line"></div>
        <div class="footer-btn">{{ $t("lotteryMoney.ljyy") }}</div>
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </bd-popup>
</template>
<script setup lang="ts" name="conversionDesc">
const props = withDefaults(
  defineProps<{
    show: boolean;
    num: number;
  }>(),
  {
    show: false,
    num: 1,
  }
);

const emit = defineEmits(["update:show", "confirm", "countdownDone"]);

// 关闭弹窗
const closePopup = () => {
  emit("update:show", false);
};

const shareApp = () => {
  emit("confirm");
  closePopup();
};
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  z-index: 9;
  margin: 0 25 * 2px;
  background-color: #fff;
  border-radius: 12 * 2px;
  overflow: hidden;
  padding: 15 * 2px;

  &-title {
    width: 100%;
    height: 30 * 2px;
    position: relative;

    &-bg {
      position: absolute;
      top: 0;
      height: 30 * 2px;
      width: 100%;
    }
    &-value {
      position: relative;
      z-index: 9;
      height: 30 * 2px;
      line-height: 30 * 2px;
      width: 100%;
      text-align: center;
      font-size: 15 * 2px;
      color: #fff;
      font-weight: 590;
    }
  }

  &-desc {
    font-size: 13 * 2px;
    color: #999da7;
    margin: 10 * 2px 0;
  }

  &-item {
    padding: 8 * 2px 10 * 2px;
    border-radius: 8 * 2px;
    border: 0.5px solid rgba(115, 119, 128, 0.15);
    margin-bottom: 10 * 2px;

    &-img {
      margin-right: 8 * 2px;
      width: 18 * 2px;
      height: 18 * 2px;
    }
    &-text {
      font-size: 13 * 2px;
      color: #141924;
    }
  }
}
.close {
  position: relative;
  z-index: 9;
  bottom: -30 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
.footer {
  position: relative;
  padding-top: 10 * 2px;

  &-btn {
    border-radius: 6 * 2px;
    background: #007bff;
    padding: 10 * 2px 0;
    font-size: 15 * 2px;
    color: #fff;
    font-weight: 590;
    text-align: center;
  }

  &-line {
    position: absolute;
    top: 0;
    left: -20 * 2px;
    height: 0.5px;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.1);
  }
}
</style>
